<!doctype html>
<html>
	<head>
	<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<style>
		html,body{
			margin:0;
			padding: 0;
		}
		#mycanvas_container{
			overflow: hidden;		
		}
	</style>
    <script type="text/javascript" src="js/require.js"></script>
	</head>
	<body>
		<div id="mycanvas_container"></div>
	</body>
    <script>
        require(['../dist/jmgraph.js'], function(m) {
            var g = new m.jmGraph(container, {
                width: 800,
                height: 600,
                style: {
                    fill: '#000'
                }
            });
            init(g);
        });
        
		var container = document.getElementById('mycanvas_container');	
		
			
		function init(g){
			//g.style.fill = '#000'; //画布背景
			var style = {
				stroke:'#46BF86',
				fill: '#556662',
				lineWidth: 2
			};
			style.shadow = '0,0,10,#fff';
			//style.opacity = 0.2;			
			//style.lineCap = 'round';

			//创建一个方块
			var rect = g.createShape('rect', {
				style:style,
				position: {x:100,y:100},
				width:100,
				height:100
			});
			g.children.add(rect);
			rect.canMove(true);

			function update() {
				if(g.needUpdate) g.redraw();
				requestAnimationFrame(update);
			}

			update();
		}
	</script>
</html>